import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { useQuery, gql } from '@apollo/client';
import Helper from '../Helper';
import Dialog from '@kuiper-components/dialog';
import Button from '@kuiper-components/button';

import Aviliable from './Aviliable';
import SecurityEvent from './SecurityEvent';
import Vul from './VulMonitorSettings';
import Asset from './Asset';
import Content from './Content';
import changeCheck from './ChangeCheck'
import {
	FREQ_UNIT_MAP,
	INFORM_OPTIONS,
	SPEED_LEVEL_MAP,
	TASK_TYPE_CATEGORY_MAP,
	TRIGGER_KEY_LABEL_MAP,
	VUL_TRIGGER_KEY_LABEL_MAP,
} from '../../../common/constants';
import CollectFrequency from '../CollectFrequency';
import s from './TaskSettingsViewer.module.css';

export { Aviliable as ping, Aviliable as http };

const ALERT_GROUP_QUERY = gql`
	query($ids: [MongoID]) {
		AlertGroupMany(filter: { _ids: $ids }) {
			isDefault
			receiverIds
			name
			_id
		}
	}
`;
function triggerTypeParser({ taskType, taskSettings, triggerType }) {
	if (taskType === 'vul') {
		return VUL_TRIGGER_KEY_LABEL_MAP[triggerType];
	} else {
		return TRIGGER_KEY_LABEL_MAP[triggerType];
	}
}

export default function TaskSettingsViewer({
	taskType,
	children,
	className,
	jobId,
	host,
	note,
	triggerType,
	isLatestTask,
	taskSettings,
	alertSettings,
}) {
	const [visible, setVisible] = React.useState(false);
	const alertGroupData = useQuery(ALERT_GROUP_QUERY, {
		variables: { ids: alertSettings?.alertGroupIds },
	});
	const alertGroup = alertGroupData?.data?.AlertGroupMany || [];
	const notigicationArr = [];
	alertSettings &&
		INFORM_OPTIONS.forEach(e => {
			alertSettings?.notification?.[e.value] && notigicationArr.push(e.label);
		});
	let Addition;
	switch (taskType) {
		case 'vul':
			Addition = Vul;
			break;
		case 'asset':
			Addition = Asset;
			break;
		case 'securityEvent':
			Addition = SecurityEvent;
			break;
		case 'ping':
		case 'http':
			Addition = Aviliable;
			break;
		case 'content':
			Addition = Content;
			break;
		case 'changeCheck':
			Addition = changeCheck;
			break;
		default:
			Addition = () => '';
	}

	return (
		<>
			<Button
				link
				primary
				className={className}
				onClose={() => setVisible(false)}
				onClick={() => setVisible(true)}
			>
				{children}
			</Button>
			<Dialog
				title={
					<div className={s.dialogtitle}>
						<span>{children}</span>
						<Helper
							overlayClassName={s.helpTooltip}
							overlay={
								<>
									<p>以下配置为该资产当次任务检测时设置的参数。</p>
									<p>
										如需查看最新周期性参数配置，请前往“资产列表-管理-周期配置”
									</p>
								</>
							}
							placement="right"
						/>
					</div>
				}
				visible={visible}
				className={s.modal}
				onClose={() => setVisible(false)}
			>
				<table className={s.currentSetting}>
					<tr>
						<td className={s.label}>资产名称:</td>
						<td>{note}</td>
					</tr>
					<tr>
						<td className={s.label}>资产地址:</td>
						<td>{host}</td>
					</tr>
					<tr>
						<td className={s.label}>监测方式:</td>
						<td>
							<span>
								{triggerTypeParser({ triggerType, taskType, taskSettings })}
							</span>
						</td>
					</tr>
					{taskSettings && (
						<Addition fieldClassName={s.label} taskSettings={taskSettings} />
					)}
					{(triggerType === 'schedule' ||
						triggerType === 'scheduleIncrement') && (
						<tr>
							<td className={s.label}>监测频率:</td>
							<td>
								<CollectFrequency
									viewmode
									value={taskSettings?.interval}
									unitMap={FREQ_UNIT_MAP}
								/>
							</td>
						</tr>
					)}
					{taskSettings?.collect?.speed && (
						<tr>
							<td className={s.label}>监测速度:</td>
							<td>
								<span>{SPEED_LEVEL_MAP[taskSettings?.collect?.speed]}</span>
							</td>
						</tr>
					)}
					{/* 移至组件内部
					{taskSettings?.collect?.depth >= 0 && (
						<tr>
							<td className={s.label}>监测深度:</td>
							<td>
								<span>{taskSettings.collect.depth}</span>层
							</td>
						</tr>
					)}
					<tr>
						<td className={s.label}>监测最大URL数:</td>
						<td>
							<span>{taskSettings?.collect?.maxPage}</span>页
						</td>
					</tr> */}
					{alertSettings && (
						<>
							<tr>
								<td className={s.label}>通知对象:</td>
								<td className={s.value}>
									{alertGroup?.length
										? alertGroup.map(({ _id, name }) => {
												return (
													<span className={s.hl2} key={_id}>
														{name}
													</span>
												);
										  })
										: '--'}
								</td>
							</tr>
							<tr>
								<td className={s.label}>通知类型:</td>
								<td className={s.value}>
									{notigicationArr.map((e, i) => {
										return (
											<span key={e}>
												{e}
												{i === notigicationArr.length - 1 ? '' : '、'}
											</span>
										);
									})}
								</td>
							</tr>
						</>
					)}
				</table>
				<div className={s.btnContainer}>
					{jobId &&
						isLatestTask &&
						(triggerType === 'schedule' ||
							triggerType === 'scheduleIncrement') && (
							<Link
								className={s.btn}
								to={`/job/${jobId}/${TASK_TYPE_CATEGORY_MAP[taskType]}/${taskType}`}
							>
								<Button
									size="small"
									className={s.btn}
									onClick={() => setVisible(false)}
								>
									前往修改
								</Button>
							</Link>
						)}
					<Button
						size="small"
						className={s.btn}
						primary
						onClick={() => setVisible(false)}
					>
						取消
					</Button>
				</div>
			</Dialog>
		</>
	);
}

TaskSettingsViewer.propTypes = {
	className: PropTypes.string,
	children: PropTypes.node,
	taskType: PropTypes.string.isRequired,
	host: PropTypes.string,
	triggerType: PropTypes.string,
	taskSettings: PropTypes.object,
	jobId: PropTypes.string,
	isLatestTask: PropTypes.bool,
	note: PropTypes.string,
	alertSettings: PropTypes.object,
};
